<!-- 文档类型定义，表示html5版本  ctrl+/ -->
<!DOCTYPE html>
<!-- html表示根标签，hyper text mark language超文本标记语言 -->
<html>
	<head>
		<!-- 页面编码，要求与项目，数据库一致，否则网页乱码 
		 单标签,只有开始和闭合
		-->
		<meta charset="utf-8" />
		<title>部门插入页面</title>
		<!-- ctrl+向上箭头 -->
		<!-- 链接外部样式 -->
		<!-- ../表示上层目录 -->
		<link  href="../../css/mycss.css" rel="stylesheet" type="text/css"/>
		<style>
			/* 内部样式 ：作用于当前页面*/
			/* 结构:选择器{属性名:值;属性名:值;...} */
			/* 元素选择器 */
			form{
				width: 500px;
				height: 500px;
				/* border: solid 1px red !important;  优先级最高 */
				border: solid 1px red;
			}
			#deptform{
				width: 500px;
				height: 500px;
				/* border: solid 1px red !important;  优先级最高 */
				border: solid 1px blue;
				/* 水平居中 */
				margin: 0 auto;
				/*相对定位，默认值为static */
				position:relative;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			.deptform{
				width: 500px;
				height: 500px;
				/* border: solid 1px red !important;  优先级最高 */
				border: solid 1px purple;
			}
			/* 在内部样式中，id选择器>类选择器>元素选择器,权重越高，优先级最高 */
			table{
				width: 400px;
				height: 400px;
				border: solid 1px green;
				position: absolute;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			/* 后代选择器 */
			table td{
				text-align: center;
			}
			/* 回字型布局
			  1.父容器为相对定位
			  2.子容器为绝对定位
			  3.子容器上下左右为0,外边距auto
			 */
		</style>
		<!-- 引入外部脚本 -->
<!--		引入脚本-->
		<script src="../../js/jquery.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			//自定义函数
			function tijiao(){
				// 第一个参数为后端地址，第二个参数为数据，第三个参数为回调数据，第四个为默认类型
				//请求为异步操作
				$.post(url+"dept/insert",$("form").serialize(),function (data){
					//回调数据为1或0
					if (data==1){
						alert("插入成功");
						location.href="deptlist.html";
					}else{
						alert("插入失败");
					}
				});
				//阻止表单提交
				return false;
			}
		</script>
	</head>
	<body>
		<!-- 块标签：独占一行  form及table等
		    行标签:不独占一行，由内容决定input标签  span img等
		 ctrl+shift+r复制-->
		<form action="deptlist.html" method="post" style="border: solid 10px green;" id="deptform" class="deptform">
			<table>
				<!-- tr*4>td*2 tab键 4行2列 -->
<!--				<tr>-->
<!--					<td>部门编号</td>-->
<!--					<td>-->
<!--						&lt;!&ndash; 行内样式:作用于当前标签 &ndash;&gt;-->
<!--						<input type="text" name="deptno" id="deptno" style="" value=""/></td>-->
<!--				</tr>-->
				<tr>
					<td>部门名称</td>
					<td><input type="text" name="dname" id="dname"/></td>
				</tr>
				<tr>
					<td>位置</td>
					<td><input type="text" name="loc" id="loc"/></td>
				</tr>
				<tr>
					<!-- ctrl+d删除所在行 -->
					<td colspan="2">
						<!-- 表单提交时，执行action，请求方式post不支持（没有服务器）
						  method修改为get提交(默认提交)
						  执行过程：先调用脚本，再执行action属性
						 -->
						<input type="submit" value="提交" onclick="return tijiao()"/>
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
			
			
		</form>
		
	</body>
</html>
